<template>
  <div class="container">
    <el-card>

      <el-row type="flex" justify="space-between">
        <el-col :span="18">
          <el-form ref="requestParameters" :inline="true" label-position="right">

            <el-form-item label="目录名称">
              <el-input
                v-model="datadirectoryName"
                style="width: 200px;"
                class="filter-item"
              />
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="datastate" placeholder="请选择">
                <el-option label="启用" value="1" />
                <el-option label="禁用" value="0" />

              </el-select>
              <el-button
                class="filter-item cleanbtn"
                size="small"
                @click="cleanData"
              >清除</el-button>
              <el-button
                class="filter-item"
                size="small"
                type="primary"
                @click="searchDirectorys"
              >搜索</el-button>

            </el-form-item>

          </el-form>
        </el-col>
        <el-col :span="6" class="colout">
          <el-button
            v-if="subjectID"
            icon="el-icon-back"
            type="text"
            size="small"
            class="reback"
            @click="
              $router.push({
                path: '/subjects/list'})"
          >
            <span>返回学科</span>
          </el-button>
          <el-button
            class="filter-item fr"
            size="small"
            type="success"
            icon="el-icon-edit"
            @click="newadd"
          >新增目录</el-button>
        </el-col>
      </el-row>

      <el-alert
        v-if="alertText !== ''"
        :title="alertText"
        type="info"
        class="alert"
        :closable="false"
        show-icon
      />
      <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="dataList"
        :row-class-name="rowClassStatus"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        fit
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column :label="$t('table.id')" type="index" width="80px" />
        <el-table-column label="所属学科">
          <template slot-scope="scope">
            <span>{{ scope.row.subjectName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="目录名称">
          <template slot-scope="scope">
            <span>{{ scope.row.directoryName }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.username')">
          <template slot-scope="scope">
            <span>{{ scope.row.username }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.creatdate')">
          <template slot-scope="scope">
            <span>{{ scope.row.addDate |formatDate('yyyy-MM-dd hh:mm:ss') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="面试题数量">
          <template slot-scope="scope">
            <span>{{ scope.row.totals }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.state')">
          <template slot-scope="scope">
            <span>{{ scope.row.state?'已启用':'已禁用' }}</span>
          </template>
        </el-table-column>
        <!-- 按钮 -->
        <el-table-column
          :label="$t('table.actions')"
          class-name="small-padding fixed-width"
          width="150px"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="medium"
              @click="changeState(scope.row.id,scope.row.state)"
            >{{ scope.row.state? $t('table.prohibit') :'启用' }}</el-button>
            <el-button
              type="text"
              size="medium"
              :disabled="scope.row.state?true:false"
              @click="editFn(scope.row)"
            >{{ $t('table.edit') }}</el-button>
            <el-button
              size="medium"
              type="text"
              :disabled="scope.row.state?true:false"
              @click="deleteFn(scope.row.id)"
            >{{ $t('table.delete') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="end" style="margin-top:20px">
        <PageTool :total="page.counts" @pageChange="pageChange" @pageSizeChange="pageSizeChange" />

      </el-row>
    </el-card>
    <DirectorysAdd
      ref="addpro"
      :subject-i-d="subjectID"
      :show-dialog.sync="showDialog"
      :symple-date="sympleDate"
      @addSub="addSub"
    />

  </div>
</template>

<script>
import PageTool from '../components/pageTool.vue'
import { list, changeState, remove, add, update } from '@/api/hmmm/directorys.js'
import DirectorysAdd from '../components/directorys-add.vue'
import { simple } from '@/api/hmmm/subjects.js'
export default {
  components: {
    PageTool,
    DirectorysAdd
  },
  data() {
    return {
      subjectID: null,
      showDialog: false,
      sympleDate: [],
      alertText: '',
      dataList: [],
      tableKey: '',
      listLoading: false,
      page: {
        page: 1,
        pagesize: 10,
        counts: 0
      },
      data: {
        id: null,
        directoryName: null,
        state: null
      },
      id: null,
      datastate: null,
      datadirectoryName: null
    }
  },
  created() {
    this.getSimple()
    console.log(this.$route.query)
    if (this.$route.query.id) {
      this.subjectID = this.$route.query.id
      this.page.subjectID = this.$route.query.id
    } else {
      this.page = {
        page: 1,
        pagesize: 10,
        counts: 0
      }
      this.subjectID = null
    }
    this.getList()
  },
  methods: {
    newadd() {
      this.id = null
      this.showDialog = true
      this.$refs.addpro.ruleForm.subjectID = ''
      this.$refs.addpro.ruleForm.directoryName = ''
    },
    cleanData() {
      this.data = {
        id: null,
        directoryName: null,
        state: null
      }
      this.page = {
        page: 1,
        pagesize: 10,
        counts: 0
      }
      if (this.subjectID) {
        this.page.subjectID = this.subjectID
      }
      this.datastate = null
      this.datadirectoryName = null
    },
    async getList() {
      this.listLoading = true
      const { data } = await list(this.page)
      this.page.counts = data.counts
      this.alertText = `数据一共${data.counts}条`
      this.dataList = data.items
      // console.log(this.dataList)
      this.listLoading = false
    },
    async getSimple() {
      const { data } = await simple()
      this.sympleDate = data

    //   console.log(this.sympleDate, '简单数据')
    },
    pageChange(pagenum) {
      this.page.page = pagenum
      this.getList()
    },
    pageSizeChange(pagesize) {
      this.page.pagesize = pagesize
      //   console.log(this.page)
      this.getList()
    },
    searchDirectorys() {
      this.data.state = this.datastate
      this.data.directoryName = this.datadirectoryName
      this.page.directoryName = this.data.directoryName
      this.page.state = this.data.state
      //   console.log(this.page)
      this.getList()
    },
    changeState(id, state) {
      this.data.id = id
      this.data.state = !state ? 1 : 0

      changeState(this.data).then((result) => {
        this.$message.success('操作成功')
        this.getList()
        this.data = {
          id: null,
          directoryName: null,
          state: null
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    deleteFn(id) {
      this.data.id = id
      this.$confirm('是否确认删除？').then(
        () => {
          remove(this.data).then((result) => {
            this.$message.success('操作成功')
            this.page.page = Math.ceil((this.page.counts - 1) / this.page.pagesize)
            this.getList()
            this.data.id = null
          }).catch((err) => {
            console.log(err)
          })
        }
      ).catch(() => {
        this.$message('取消操作')
      })
    },
    async addSub(ruleForm) {
    //   console.log(ruleForm)
      if (!this.id) {
        await add(ruleForm)
        this.getList()
        this.showDialog = false
        this.$message.success('添加成功')
      } else {
        // console.log('修改')
        ruleForm.id = this.id
        await update(ruleForm)
        this.getList()
        this.showDialog = false
        this.$message.success('修改成功')
      }
      this.id = null
    },
    rowClassStatus() {
    },
    editFn(data) {
    //   console.log(data)
      this.id = data.id
      this.$refs.addpro.title = '修改目录'
      this.$refs.addpro.ruleForm.subjectID = data.subjectID
      this.$refs.addpro.ruleForm.directoryName = data.directoryName
      this.showDialog = true
    }
  }
}
</script>

<style scoped lang='scss'>
.container{
    padding: 10px;
}
.filter-item{
    margin-left: 10px;
}
.el-button--success{
    height: 32px;
}
::v-deep{
    .el-input__inner{
        height: 32px;
    }
    .el-form-item__label{
        width: 80px;
    }
    .el-alert.alert.el-alert--info.is-light{
        margin-bottom: 15px;
    }
    .reback{
        color: #409eff;
        font-size: 14px;
    }
    .colout{
        text-align: right;
    }
}

</style>
